import React from 'react';
import { IFormItem, Itype } from '@/base-ui/form';
import { Popconfirm, Space, Dropdown, Menu } from 'antd';
import { ISearchSelector, IToolButton } from '@/base-ui/tool-bar';
// import { ColumnProps } from 'antd/es/table'

const randomId = () => String(Math.random()).slice(2);

const menu = (
  <Menu
    items={[
      {
        key: 0,
        label: <span>详情</span>
      },
      {
        key: 1,
        label: <span>复制</span>
      }
    ]}
  />
);

/* 搜索区域 */
export const PageSearchConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '订单编号',
    placeholder: '请输入订单编号'
  },
  {
    type: 'input' as Itype,
    label: '商品名称',
    placeholder: '请输入商品名称'
  },
  {
    type: 'input' as Itype,
    label: '销售单位',
    placeholder: '请输入销售单位'
  },
  {
    type: 'input' as Itype,
    label: '备注',
    placeholder: '请输入备注'
  },
  // {
  //   type: 'password' as Itype,
  //   label: '密码',
  //   placeholder: '请输入密码'
  // },
  {
    type: 'select' as Itype,
    label: '订单状态',
    placeholder: '请选择状态',
    options: [
      { label: '未付款', value: 'value1' },
      { label: '已付款', value: 'value2' },
      { label: '退款中', value: 'value3' },
      { label: '已退款', value: 'value4' }
    ]
  },
  {
    type: 'datepicker' as Itype,
    label: '当天订单',
    otherOptions: {
      placeholder: '请选择日期'
    }
  },
  {
    type: 'rangepicker' as Itype,
    label: '多日订单',
    otherOptions: {
      placeholder: ['开始日期', '结束日期']
    }
  }
];

/* 工具栏区域 */

// 选择器配置
export const SearchSelector: ISearchSelector = {
  Options: [
    { label: '订单编号', value: '1' },
    { label: '商品名称', value: '2' },
    { label: '销售单位', value: '3' }
  ],
  defaultValue: '1'
};
// 按钮组
export const buttonGroup: IToolButton[] = [
  {
    type: 'create',
    text: '新增记录',
    isShow: true,
    onClick: () => {}
  },
  { type: 'delete', text: '批量删除', isShow: true, onClick: () => {} },
  { type: 'import', text: '导入', isShow: true, onClick: () => {} },
  { type: 'export', text: '导出', isShow: true, onClick: () => {} },
  { type: 'print', text: '打印', isShow: true, onClick: () => {} }
];

/* 表格区域 */

// 表格数据
export const FormDataSource: any = [
  {
    key: '0',
    orderId: randomId(),
    name: '麻辣鸡腿',
    department: '销售部',
    date: '2022-4-25',
    status: '空',
    specification: '1个/包',
    num: '300',
    price: '10',
    remark: '好吃',
    action: ''
  },
  {
    key: '1',
    orderId: randomId(),
    name: '香辣鸡腿',
    department: '销售部',
    date: '2022-4-25',
    status: '空',
    specification: '1个/包',
    num: '100',
    price: '15',
    remark: '好吃',
    action: ''
  },
  {
    key: '2',
    orderId: randomId(),
    name: '不辣鸡腿',
    department: '销售部',
    date: '2022-4-25',
    status: '剩余',
    specification: '1个/包',
    num: '200',
    price: '12',
    remark: '还行',
    action: ''
  },
  {
    key: '3',
    orderId: randomId(),
    name: '麻辣鸡腿',
    department: '销售部',
    date: '2022-4-25',
    status: '空',
    specification: '1个/包',
    num: '250',
    price: '10',
    remark: '好辣',
    action: ''
  }
];
// 表格列配置
// type columnType = {
//   title: string
//   dataIndex: string
//   key: string
// }

// export const FormColumns: ColumnProps<columnType>[] = [
export const FormColumns: any = [
  {
    title: '订单编号',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 100
  },
  {
    title: '订单编号',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 100
  },
  {
    title: '订单编号',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 100
  },
  {
    title: '订单编号',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 100
  },
  {
    title: '订单编号',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 100
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '销售单位',
    dataIndex: 'department',
    key: 'department'
  },
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',

  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '规格',
    dataIndex: 'specification',
    key: 'specification'
  },
  {
    title: '数量',
    dataIndex: 'num',
    key: 'num',
    sorter: (a: any, b: any) => a.num - b.num
  },
  {
    title: '单价(￥)',
    dataIndex: 'price',
    key: 'price',
    sorter: (a: any, b: any) => a.price - b.price
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 150,
    render: (_: any, record: { key: React.Key }) => (
      <Space>
        <a>编辑</a>
        <Popconfirm
          title="确定删除?"
          okText="确认"
          cancelText="取消"
          // cancelButtonProps={{ size: 'middle' }}
          onConfirm={() => {}}
        >
          <a style={{ color: '#ff4d4f' }}>删除</a>
        </Popconfirm>
        <Dropdown overlay={menu}>
          <a onClick={(e) => e.preventDefault()}>···</a>
        </Dropdown>
      </Space>
    ),
    fixed: 'right'
  }
];
